<template>
  <div class="zw-member">
    <div class="zw-header">
      <div class="zw-header--row is-mt20">
        <div class="zw-header__col">
          <p class="icon">
            <img src="http://cdn.gee4.cn/zw-wx/v0.0.1/img/portalNew/icon_avatar.png" alt="">
          </p>
          <p class="value">{{channelList.statistics && channelList.statistics.name }}</p>
        </div>
      </div>
      <div class="zw-header--row is-br">
        <div class="zw-header__col">
          <p class="title">获得积分</p>
          <p class="value">{{channelList.statistics && channelList.statistics.credit || 0}}</p>
        </div>
        <div class="zw-header__col">
          <p class="title">总销售额</p>
          <p class="value">{{channelList.statistics && channelList.statistics.sales || 0}}</p>
        </div>
        <div class="zw-header__col">
          <p class="title">订单总数</p>
          <p class="value">{{channelList.statistics && channelList.statistics.orderNumber || 0 }}</p>
        </div>
      </div>
    </div>
    <div class="zw-card" v-for="channel in channelList.channels">
      <div class="zw-card--row zw-col-lr">
        <p><span class="zw-large">{{channel.channelName}}</span><small class="small zw-gray">{{channel.phone}}</small></p>
        <p><small class="small zw-gray">提成比例</small><span class="zw-large">{{channel.proportion}}%</span></p>
      </div>
      <ul class="zw-card--row is-br">
        <li>
          <p class="title">订单数</p>
          <p class="value">{{channel.channelOrderNumber}}</p>
        </li>
        <li>
          <p class="title">购买金额</p>
          <p class="value">{{channel.sales}}</p>
        </li>
        <li>
          <p class="title">获得积分</p>
          <p class="value">{{channel.channelCredit}}</p>
        </li>
        <li>
          <p class="title">会员数</p>
          <!-- <p class="value">{{channel.channelCredit}}</p> -->
          <p class="value">--</p>
        </li>
      </ul>
    </div>
    <div class="zw-card" v-if="channelList.channels.length == 0">
       暂无渠道
    </div>
  </div>
</template>
<script>
import { Toast, Indicator } from 'mint-ui';
import { mapActions, mapGetters } from 'vuex';
import sharePop from "components/sharePop"
import { getRedeemReward } from "api/moneyBack"
import { wxshare } from 'common/mixin'

export default {
  mixins: [wxshare],
  data() {
    return {
      channelList: {
        statistics: {},
        channels: []
      }
    }
  },
  watch: {
    '$route' (to, from) {
      this.getList();
    }
  },
  methods: {
    ...mapActions({
      LowerChannel: 'LowerChannel_n',
    }),
    next(id, name) {
      let title = `${name}的下级渠道（我的二级渠道）`
      this.$router.push({ path: '/channel/lowerChannel', query: { id, name: title } });
    },
    getList() {
      Indicator.open();
      console.log(this.$route.query)
      this.LowerChannel({ channelId: this.$route.query.id }).then(result => {
        this.channelList = result;
        console.log(result)
        Indicator.close();
      }, error => {
        Indicator.close();
      })
    }
  },
  mounted() {
    this.getList();
  },
}

</script>
<style scoped>
@import './channelList.css';

</style>
